<template>
  <div v-loading="loading" element-loading-background="transparent">
    <el-row :gutter="20">
      <!-- <el-col :span="15" style=" border-right: 1px solid #e8e8e8;">
        <div v-if="userDepts.length > 1" style="margin-bottom: 10px">
          本次发起部门：
          <el-radio-group size="mini" v-model="userDeptId">
            <el-radio :label="dept.id" :key="dept.id" v-for="dept in userDepts">{{dept.name}}</el-radio>
          </el-radio-group>
        </div>
        <form-render v-if="!loading" class="process-form" ref="form" mode="PC" :config="form.formConfig" :forms="forms" v-model="formData"/>
      </el-col> -->
      <el-col :span="20">
        <!--渲染执行流程-->
        <process-render
          ref="process"
          :dept-id="userDeptId"
          :value="processUsers"
          :forms="forms"
          :formData="formData"
          :process="process"
          :preview="preview"
          v-if="process && process.id"
        />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getDentify } from '@/utils/auth'
import ProcessRender from './ProcessRender'
// import FormRender from '@/views/common/form/FormRender'
// import FormDesignRender from '@/views/admin/layout/form/FormDesignRender'
import { getUserDepts } from '@/views/approval/process/common/api/org'
import { getInstanceFormData } from '@/views/approval/process/common/api/processTask'
import { getModelById } from '@/views/approval/process/common/api/modelGroup'
import { startProcess } from '@/views/approval/process/common/api/process'

export default {
  name: 'InitiateProcess',
  components: { ProcessRender },
  props: {
    code: {
      type: String,
      required: true
    },
    instanceId: {
      type: String,
      required: false
    },
    processPreview: {
      type: Object,
      defualt: () => ({})
    },
    preview: {
      type: Boolean,
      defualt: false
    }
  },
  watch: {
    processPreview(value) {
      let interval = setInterval(() => {
        if (this.$refs.process) {
          clearInterval(interval)
          let object = {}
          Object.keys(value).map((element) => {
            object[element] = [
              ...value[element].map((element) => ({
                ...element,
                enableEdit: !this.preview
              }))
            ]
          })
          this.$refs.process.setValue(object)
        }
      }, 100)
    }
  },
  data() {
    return {
      loading: false,
      formData: {},
      processUsers: {},
      userDepts: [],
      userDeptId: null,
      form: {
        formId: '',
        formName: '',
        logo: {},
        formItems: [],
        process: {},
        remark: ''
      }
    }
  },
  mounted() {
    this.loadFormInfo(this.code)
    this.getUserDept()
  },
  computed: {
    forms() {
      return this.$store.state.select.design.formItems
    },
    process() {
      return this.$store.state.select.design.process
    }
  },
  methods: {
    reset(id) {
      this.$store.state.select.design = {}
      this.loadFormInfo(id)
    },
    getUserDept() {
      this.userDeptId = getDentify().orgId
      // getUserDepts(this.$store.state.select.loginUser.id)
      //   .then((rsp) => {
      //     this.userDepts = rsp.data
      //     if (this.userDepts.length > 0) {
      //       this.userDeptId = this.userDepts[0].id
      //     }
      //   })
      //   .catch((err) => {
      //     this.$err(err, '获取用户部门信息失败')
      //   })
    },
    // loadFormData(){
    //   if (this.$isNotEmpty(this.instanceId)){
    //     getInstanceFormData(this.instanceId).then(rsp => {
    //       for (let key in this.formData) {
    //         this.formData[key] = rsp.data[key]
    //       }
    //     }).catch(e => {
    //       this.$err(e, "加载原始数据失败")
    //     })
    //   }
    // },
    loadFormInfo(id) {
      this.loading = true
      this.formData = {}
      getModelById(id)
        .then((rsp) => {
          this.loading = false
          console.log(rsp.data,'value')
          let form = rsp.data
          form.logo = JSON.parse(form.logo)
          this.form = form
          //构建表单及校验规则
          this.$store.state.select.design = form
          // this.loadFormData()
        })
        .catch((err) => {
          this.loading = false
          this.$err(err, '获取流程模型失败')
        })
    },
    validate(call) {
      this.$refs.process.validate((validProcess) => {
        call(validProcess)
      })
    },
    submit() {
      return {
        // formData: this.formData,
        defId: this.form.processDefId,
        processStartParamsVo: {
          deptId: getDentify().orgId,
          processUsers: this.processUsers
        }
      }
      //this.$message.success("表单填写OK了，提交功能还在开发哦")
      // startProcess(this.form.processDefId, {
      //   deptId: getDentify().orgId,
      //   // formData: this.formData,
      //   processUsers: this.processUsers
      // })
      //   .then((rsp) => {
      //     this.$message.success(rsp.data)
      //     this.$emit('ok')
      //   })
      //   .catch((err) => {
      //     this.$emit('fail')
      //     this.$err(err, '发起审批失败')
      //   })
    }
  }
}
</script>

<style lang="less" scoped>
.process-form {
  /deep/ .el-form-item__label {
    padding: 0 0;
  }
}
</style>
